<template>
    <div style="background: #F2F3F5">
        <div @:click="go(el)" class="fa" v-for="el in arr">
            <div className="left">
                <div className="img">
                    <img  :src="'http://localhost:7001/public/'+el.img" alt="" />
                </div>
                <div className="txt">
                    <div>
                        <span style="font-size: 24px;margin-right: 12px"> {{ el.title }} </span>
                        <span className="bord"> 从业10年以上 </span>
                        <span className="bord"> 快速响应 </span>
                        <span className="bord"> 耐心细致 </span>
                    </div>
                    <div style="margin-top: 14px">
                        <span className="c1">
                            {{ el.typle }}
                        </span>
                        <span className="c1">
                            {{ el.updata }}
                        </span>
                        <span className="c1">
                            {{ el.type2 }}
                        </span>
                    </div>
                    <div style="margin-top: 14px">
                        <span className="c2">
                            {{ el.detail }}
                        </span>
                    </div>
                    <div className="btn">
                        <span>
                            图文问诊
                        </span>
                    </div>
                </div>
            </div>
            <div className="right">
                <!-- #e8e9eb -->
                <div style="font-size: 16px;color: gold;">
                    <span style="font-size: 20px;font-weight: 700;">
                        <!-- {{ Math.floor(Math.random()*4+2)}} -->
                        4.00
                    </span>分
                </div>
                <div style="margin: 8px 0 21px;">
                    图标
                </div>
                <div className="right1">月回答 53</div>
                <div className="right1">月处方 3</div>
                <div className="right1">3分钟回答</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount,onBeforeUpdate } from "vue"
import axios from "axios";
import { useRouter } from "vue-router";
import store from "@/store/S_zc"
let data = store().cache

let router = useRouter()

let arr :any= ref({})

onBeforeMount(() => {
    seaeched(data.str, data.ar[1])
})
onBeforeUpdate(()=>{
    seaeched(data.str, data.ar[1])
})

async function seaeched(x: string, y?: string[]) {
    if (y) {
        if (y[0] == undefined) {
            // 显示没有
        } else {
            let re: any = await axios("/path/search", { params: { department: x, sec: true, table: y[0], field: y[1] } })
            arr.value = re.data.sql
            // console.log(typeof(arr.value),arr.value, "doctor")
        }

    } else {
        // let re: any = await axios("/path/search", { params: { department: x, table: data.ar[0][0], field: data.ar[0][1] } })
        // arr.value = re.data.sql
    }
    if (arr.value[0] ==undefined) {
        router.push('/Null')
    }

}

function go(x){
    console.log("home_grandson/os_doctor  医生详情页",x)
}
</script>

<style scoped  lang="scss">
* {
    margin: 0;
    padding: 0;
}

.fa {
    width: 1150px;
    height: 158px;
    background-color: white;
    padding: 28px 0 28px 30px;
    margin-bottom: 20px;

    display: flex;
    justify-content: space-between;

    .left {
        display: flex;
        justify-content: flex-start;
        text-align: left;

        img {
            width: 80px;
            height: 80px;
            border-radius: 40px;
            background-color: aqua;
        }

        .txt {
            margin-left: 20px;

            .bord {
                padding: 4px;
                margin-right: 8px;
                font-size: 12px;
                line-height: 16px;
                color: #818993;
                border-radius: 4px;
                background-color: #f2f3f5;
            }

            .c1 {
                font-size: 16px;
                line-height: 20px;
                color: #444c57;
                margin-right: 8px;
            }

            .c2 {
                font-size: 14px;
                line-height: 18px;
                color: #6c7480;
            }

            .btn {
                span {
                    display: inline-block;
                    background-color: #00c792;
                    border-radius: 4px;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 18px;
                    text-align: center;
                    color: #fff;
                    margin-top: 20px;
                    padding: 10px 42px;

                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }
    }

    .right {
        border-left: 2px #e8e9eb solid;

        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        min-width: 229px;
        align-items: center;
        position: relative;

        .right1 {
            font-size: 12px;
            line-height: 16px;
            color: #6c7480;
            margin-top: 4px;
        }
    }
}
</style>